<template>
  <div class="carousel">
    <el-carousel height="340px">
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img :src="item.idView" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "Carousel",

  setup() {
    const imagebox = reactive([
      { id: 0, idView: new URL("../../assets/2.jpg",import.meta.url).href },
      { id: 1, idView: new URL("../../assets/3.jpg",import.meta.url).href },
      { id: 2, idView: new URL("../../assets/3.jpg",import.meta.url).href },
    ]);
    return {
      imagebox,
    };
  },
};
</script>

<style scoped>
.carousel{
  position: absolute;
  width: 122%;
  transform: translate(-9%, 0%);
  right: 0;
  left: 0;
}
img {
  width: 100%;
  height: inherit;
}

</style>
